﻿<phone:PhoneApplicationPage 
    x:Class="Omnia.Wallet.Views.StatisticsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:viewmodel="clr-namespace:Omnia.ViewModels;assembly=Omnia.ViewModels"
    xmlns:converters="clr-namespace:Omnia.Converters;assembly=Omnia.Converters"
    xmlns:UX="clr-namespace:Omnia.UX;assembly=Omnia.UX"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape"  Orientation="Landscape"
    shell:SystemTray.IsVisible="False">
    <phone:PhoneApplicationPage.Resources>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot">
        <Grid.DataContext>
            <viewmodel:StatisticsViewModel/>
        </Grid.DataContext>
        <Grid.Background>
            <ImageBrush ImageSource="{Binding BackgroundImageSource}" Stretch="{Binding GlobalSettings.BackgroundImageStretch}"/>
        </Grid.Background>
        
        <controls:Pivot Title="{StaticResource IDS_PAGE_TITLE}">
            <!--Pivot item one-->
            <controls:PivotItem Header="{StaticResource IDS_LABEL_STATISTIC_MONTHLY}">
                <Grid>
                    <Grid.DataContext>
                        <viewmodel:StatisticsMonthlyViewModel/>
                    </Grid.DataContext>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition />
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <telerikChart:RadCartesianChart Visibility="{Binding Path=HasData, Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="1" Grid.Row="1">
                            <telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:DateTimeCategoricalAxis 
                                                              DateTimeComponent="Month" 
                                                              LabelFormat="MMM yyyy" 
                                                              GapLength="0.5" 
                                                              LabelInterval="1"/>
                            </telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:LinearAxis Minimum="0" Maximum="{Binding Path=MaxValue}" MajorStep="{Binding Path=MajorStep}"  LineStroke="Transparent"/>
                            </telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:RadCartesianChart.Grid>
                                <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y">
                                    <telerikChart:CartesianChartGrid.YStripeBrushes>
                                        <SolidColorBrush Color="{StaticResource PhoneInactiveColor}"/>
                                        <SolidColorBrush Color="Transparent"/>
                                    </telerikChart:CartesianChartGrid.YStripeBrushes>
                                </telerikChart:CartesianChartGrid>
                            </telerikChart:RadCartesianChart.Grid>

                            <telerikChart:BarSeries CategoryBinding="DayOrMonth" ValueBinding="Amount" ItemsSource="{Binding Path=StatExpenseCollection}"  Width="3" BorderThickness="0"/>
                            <telerikChart:LineSeries CategoryBinding="DayOrMonth" ValueBinding="Amount" ItemsSource="{Binding Path=StatIncomeCollection}"  ZIndex="1" Stroke="#FF5B00" StrokeThickness="1"/>
                        </telerikChart:RadCartesianChart>
                        <Slider Minimum="2010" Maximum="2020" Value="{Binding Path=Year, Mode=TwoWay}" SmallChange="1" Orientation="Vertical" Grid.Column="2" Grid.RowSpan="2"/>
                        <TextBlock Grid.Column="1" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left">
                            <Run Text="{Binding Path=Year,StringFormat=\{0:D4\}}"/>
                        </TextBlock>
                    </Grid>
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource PhoneTextTitle3Style}" Text="{StaticResource IDS_NOTE_NODATA}" Visibility="{Binding Path=NodataIndicatorVisibility}" />
                </Grid>
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="{StaticResource IDS_LABEL_STATISTIC_DAILY}">
                <Grid>
                    <Grid.DataContext>
                        <viewmodel:StatisticsDailyViewModel/>
                    </Grid.DataContext>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition />
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <telerikChart:RadCartesianChart Visibility="{Binding Path=HasData, Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="1" Grid.Row="1">
                            <telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:DateTimeCategoricalAxis 
                                                              DateTimeComponent="Month" 
                                                              LabelFormat="MMM yyyy" 
                                                              GapLength="0.5" 
                                                              LabelInterval="2"/>
                            </telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:LinearAxis Minimum="0" Maximum="{Binding Path=MaxValue}" MajorStep="{Binding Path=MajorStep}"  LineStroke="Transparent"/>
                            </telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:RadCartesianChart.Grid>
                                <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y">
                                    <telerikChart:CartesianChartGrid.YStripeBrushes>
                                        <SolidColorBrush Color="{StaticResource PhoneInactiveColor}"/>
                                        <SolidColorBrush Color="Transparent"/>
                                    </telerikChart:CartesianChartGrid.YStripeBrushes>
                                </telerikChart:CartesianChartGrid>
                            </telerikChart:RadCartesianChart.Grid>

                            <telerikChart:BarSeries CategoryBinding="DayOrMonth" ValueBinding="Amount" ItemsSource="{Binding Path=StatExpenseCollection}"  Width="3" BorderThickness="0"/>
                            <telerikChart:LineSeries CategoryBinding="DayOrMonth" ValueBinding="Amount" ItemsSource="{Binding Path=StatIncomeCollection}"  ZIndex="1" Stroke="#FF5B00" StrokeThickness="1"/>
                        </telerikChart:RadCartesianChart>

                        <Slider Minimum="1" Maximum="12" Value="{Binding Path=Month, Mode=TwoWay}" SmallChange="1" Orientation="Vertical" Grid.RowSpan="2" />
                        <Slider Minimum="2010" Maximum="2020" Value="{Binding Path=Year, Mode=TwoWay}" SmallChange="1" Orientation="Vertical" Grid.Column="2" Grid.RowSpan="2"/>
                        <TextBlock Grid.Column="1" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left">
                            <Run Text="{Binding Path=Month,StringFormat=\{0:D2\}}"/>
                            <Run Text="-"/>
                            <Run Text="{Binding Path=Year,StringFormat=\{0:D4\}}"/>
                        </TextBlock>
                    </Grid>
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource PhoneTextTitle3Style}" Text="{StaticResource IDS_NOTE_NODATA}" Visibility="{Binding Path=NodataIndicatorVisibility}" />
                </Grid>
                
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>
    
</phone:PhoneApplicationPage>